<template>
	<view class="contant">
		<view class="header_txt">
			<view class="dateTime">
				<image class="times" src="/static/image/calendar.png" mode="aspectFit"></image>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="date" @change="getDateTimes" />
			</view>
		</view>
		<view class="con_dailymeal" v-for="(item,index) in dataMeals" :key="index">
			<view class="top_daily_time">
				<view class="img">
					<image src="/static/image/jiucan@2x.png" mode="aspectFit"></image>
				</view>
				<view class="txt_Con">
					<view>{{item.partText}}</view>
					<view style="color: #b5b5b5;">{{item.createDate}}</view>
				</view>
			</view>
			<view class="dishesInfo">
				<view class="con_txt_info" v-for="(item2,index2) in item.details" :key="index2">
					<view>
						<text style="color: #9c9c9c;">{{item2.name}}:</text>
						<text style="margin-left: 1%;" :class="{dishStatus:item2.dishStatus != 0}">{{item2.dietLab}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 0.3rem;"></view>
		<view class="msgMeal" v-if="dataMeals.length <= 0">
			<image src="/static/image/zanwushuju.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: null,
				dataMeals: [],
				index: 0,
			}
		},
		created() {
			this.getDate();
			this.getDateList();
		},
		onPullDownRefresh() {
			this.getDateList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			//获取每日用餐列表
			async getDateList() {
				this.idCard = uni.getStorageSync('idCard');
				uni.showLoading({
					title: "加载中..."
				})
				const res = await this.$ssgwRequest({
					url: '/api-baiyun/cardConsume/dinnerSchedule',
					method: "get",
					data: {
						queryDate: this.date,
						idCard: this.idCard,
					}
				})
				if (res.success == true) {
					uni.hideLoading();
					this.dataMeals = res.data;
				} else {
					uni.hideLoading();
				}
			},
			//获取当天日期
			getDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month < 10 ? "0" + month : month;
				day  = day < 10? "0" +day : day
				this.date = year + '-' + month + '-' + day;
			},
			//获取选择的日期
			getDateTimes(e) {
				this.date = e;
				this.index = 0;
				this.idCard = null;
				this.getDateList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contant {
		position: relative;
		width: 100%;
		margin-bottom: 4%;

		.header_txt {
			width: 100%;
			height: 90rpx;

			.dateTime {
				width: 100%;
				position: fixed;
				text-align: center;
				z-index: 99;


				.times {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					top: 50%;
					left: 30%;
					transform: translateY(-50%);
					z-index: 1;
				}

				.family {
					width: 30%;
					height: 100%;
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					z-index: 1;
					color: #ababab;

					.uni-input {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				::v-deep .uni-date-x--border {
					border: none;

					.uni-date__input {
						color: #000000;
					}
				}
			}
		}

		.con_dailymeal {
			width: 96%;
			margin: 3% auto;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 5rpx 5rpx 15rpx -5rpx #9d9d9d;

			.top_daily_time {
				display: flex;
				width: 100%;

				.img {
					width: 10%;
					margin: 2% 0 2% 3%;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}


				.txt_Con {
					width: 82%;
					margin: 2% 0;
					border-bottom: 1px solid #bfbfbf;
					display: flex;

					view:first-of-type {
						font-weight: bold;
					}

					view:last-of-type {
						width: 88%;
						text-align: right;
					}
				}
			}

			.dishesInfo {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(1, 96%);
				flex-wrap: wrap;
				margin: 2% 2%;

				.con_txt_info {
					margin-bottom: 2%;
				}
			}
		}

		.msgMeal {
			width: 100%;
			margin-top: 20%;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translate(-50%);

			image {
				width: 300rpx;
				height: 300rpx;
			}

			view {
				margin: 2% 0;
				font-size: 1.6rem;
				color: #757575;
			}
		}
	}
	
	.dishStatus{
		color: #ff0000;
	}
</style>
